<template>
  <div class="config-container">
    <div class="header">
      <div class="logo">Cooperos</div>
      <div class="link">
        <div class="item">
          <a-button type="link">首页</a-button>
        </div>
        <div class="item">
          <a-button type="link">文档</a-button>
        </div>
      </div>
    </div>
    <div class="editor-container">
      <yaml-editor v-model="value"/>
    </div>
    <div class="bottom">
      <a-button @click="submit" type="primary">发布</a-button>
    </div>
  </div>
</template>

<script>

import YamlEditor from '@/components/YamlCodeEditor';
import {publish, readFile} from "@/api";

export default {
  name: 'YamlEditorDemo',
  components: {YamlEditor},
  data() {
    return {
      value: '',
    };
  },
  created() {
    this.getYmlContent()
  },
  methods: {
    getYmlContent() {
      readFile().then(res => {
        console.log(res)
        this.value = res
      })
    },
    submit() {
      var formData = new FormData();
      formData.append('content', this.value)
      publish(formData).then(res => {
        this.$message.success('发布成功!')
      })
    }
  }
};

</script>

<style lang="less" scoped>

.ant-btn-link {
  color: white;
}

.header {
  width: 100%;
  height: 60px;
  background: #001529;
  display: flex;
  justify-content: space-between;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 120px;
    height: 100%;
    font-size: 20px;
  }
  .link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 100%;
    .item {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 100%;
    }
  }
}

.bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
  width: 100%;
  height: 60px;
}

::v-deep .CodeMirror-scroll {
  font-size: 16px;
  line-height: 20px;
  background-color: rgb(45, 45, 45);
}

::v-deep .cm-s-monokai.CodeMirror {
  background: #272822;
  color: #f8f8f2;
  height: calc(100vh - 120px);
}


::v-deep .CodeMirror pre{
  line-height: 22px;
}

</style>
